<template>
  <div class="cms-views-container change-password-pages">
    <header class="h-10 leading-10 px-4 text-center w-full bg-white">
      <span class="float-left">
        <LeftOutlined class="text-base" />
      </span>
      <span class="text-base text-[#333] font-medium">修改密码</span>
    </header>
    <form class="mt-4 px-8">
      <div class="h-14 item-border" style="line-height: 56px">
        <span class="text-[#48494d] text-sm">原密码</span>
        <span class="pl-[30px] text-sm text-[#c2c2c2]"
          ><i class="not-italic relative bottom-0.5 text-[#ff613f]">|</i>请输入原密码</span
        >
        <span class="float-right">
          <img :src="headerIcons.eye_close" alt="" class="w-6 h-6" />
        </span>
      </div>
      <div class="h-14 item-border" style="line-height: 56px">
        <span class="text-[#48494d] text-sm">新密码</span>
        <span class="pl-[30px] text-sm text-[#c2c2c2]">请输入新密码</span>
        <span class="float-right">
          <img :src="headerIcons.eye_close" alt="" class="w-6 h-6" />
        </span>
      </div>
      <div class="h-14 item-border" style="line-height: 56px">
        <span class="text-[#48494d] text-sm">确认密码</span>
        <span class="pl-4 text-sm text-[#c2c2c2]">请再次输入新密码</span>
        <span class="float-right">
          <img :src="headerIcons.eye_close" alt="" class="w-6 h-6" />
        </span>
      </div>
      <button class="w-full mt-5 h-[42px] border-0 text-white text-sm rounded font-medium">确定</button>
    </form>
  </div>
</template>

<script setup lang="ts">
import headerIcons from '../assets/login'
</script>

<style scoped lang="less">
.change-password-pages {
  .item-border {
    border-bottom: 1px solid #f1f3f7;
  }
  button {
    opacity: 0.3;
    background-image: linear-gradient(134deg, #ff983f 0%, #ff613f 100%);
  }
}
</style>
